<template>
  <div>
    <el-dialog title="分类详情" :visible.sync="showDialog_" custom-class='dialog_right MkCategoryDetail' top="0%" @close='closeDialog("addForm")' @open='openDialog'>
      <div class="operationBtnInRightDialog">
          <span class='infoIcon'  @click="dialogVisible_edit = true"><i class="el-icon-edit"></i> 编辑</span>
          <!--<span class="operationLine">|</span>-->
          <span class='infoIcon' @click="deleteCategory" ><i class="el-icon-delete"></i> 删除</span>
      </div>
      <el-form  label-width="80px">
        <el-form-item  label="分类名称">
          {{currentObj.name}}
        </el-form-item>
        <el-form-item  label="排序">
          {{currentObj.weight}}
        </el-form-item>
        <el-form-item  label="上级分类"  v-if="currentObj.parentIdPath && currentObj.parentIdPath.length > 2">
          {{currentObj.parentName}}
        </el-form-item>
        <el-form-item label="分类图片">
          <template v-if="currentObj.hasImage">
              <div class="showImageInFixedContainer" @click="viewImage(currentObj.image.accessUrl)">
                <img :src="currentObj.image.accessUrl" alt=""/>
              </div>
          </template>
          <template v-else>
            无
          </template>
        </el-form-item>
        <el-form-item label="是否展示">
          {{currentObj.status == 'ENABLE'?'是' : '否'}}
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--预览图片-->
    <el-dialog :visible.sync="imageDialogVisible"  custom-class="show-image-dialog" top="0%">
      <img :src="imageViewUrl" alt=""/>
    </el-dialog>

    <!--编辑-->
    <mk-add-category :showDialog='dialogVisible_edit'  v-on:closeDialog='closeDialog_edit' :currentObj="currentObj"></mk-add-category>
  </div>
</template>

<script>
  import MkAddCategory from './MkAddCategory.vue'
  import productService from '../../services/product'
export default {
  name: 'MkCategoryDetail',
  components: {
    MkAddCategory
  },
  props: ['showDialog','currentObj'],
  methods: {
    deleteCategory() {
        console.log('00099')
      this.$confirm('您确定要删除该分类?','删除分类',{
        confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          closeOnPressEscape:false,
          customClass: 'confirmBox_warning'
      }).then(()=>{
        productService.deleteCategoryServer({id:this.currentObj.id},data=>{
            this.$message.success('删除成功');
            this.showDialog_ = false;
            this.isRefresh = true;
        })
      }).catch(()=>{

      })
    },
    closeDialog_edit(type) {
        this.isRefresh = type;
        this.dialogVisible_edit = false;
        this.showDialog_ = false;
    },
    viewImage(src) {
        this.imageViewUrl = src;
        this.imageDialogVisible = true;
    },
    closeDialog() {
      this.$emit('closeDialog',this.isRefresh);
    },
    openDialog() {
      this.isRefresh = false;
    },
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_ = value;
    }
  },
  data () {
    return {
      dialogVisible_edit: false,
      imageDialogVisible: false,
      imageViewUrl:'',
      isRefresh: false,
      showDialog_: this.showDialog,
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
 @import '../../assets/style/main.less';
  .MkCategoryDetail{
  .showImageInFixedContainer{
    .showImageInFixedContainer(120px,120px);
  }
  .el-form-item{
    margin-bottom:10px;
  }

  }
</style>
